import React, { useEffect } from 'react'
import { Swiper, Image, Grid,Sticky  } from 'react-vant';
import axios from "axios";
import { useDispatch, useSelector } from "react-redux"
import "../../../api/data"
import * as Action from "../../../actions/index"
import { ALLSTATE, IMGSTYPE } from "../../../types/store"
import { connect } from 'react-redux'
import { bindActionCreators, Dispatch } from 'redux';
import {useNavigate} from "react-router-dom";
function Index() {
  const dispatch = useDispatch();
  const navigate = useNavigate();
  useEffect(()=>{
    axios.get("/api/list").then(res => {
      dispatch(Action.get_list(res.data.list))
    })
  },[])
  const listArr = useSelector((state: ALLSTATE) => {
    return state.listArr;
  })
  return (
    <div className="index">
      <Grid border={false} columnNum={2}>
        {
          listArr.map((item, index) => {
            return <Grid.Item key={index} onClick={()=>navigate("/detail/"+item.id,{state:item})}>
              <Image src={item.img} />
              <p>{item.title}</p>
            </Grid.Item>
          })
        }
      </Grid>

    </div>
  )
}

const mapStateToProps = (state: ALLSTATE) => ({})

const mapDispatchToProps = (dispatch: Dispatch) => {
  return { ...bindActionCreators(Action, dispatch) }
}

export default connect(mapStateToProps, mapDispatchToProps)(Index)
